<template>
	<div class="zh-journal-review">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 120px">
						<el-select v-model="logParam.role_id" filterable placeholder="请选择">
						    <el-option
						      v-for="item in roleData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入用户名/标题搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="danger" @click="deleteMuiltLog_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt"
			>
				<el-table
				    :data="logList"
				    border
				    @selection-change="tableSelectionChange"
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="日记标题"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="user_name"
				      label="发布人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="role_name"
				      label="角色"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="上传时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      show-overflow-tooltip
				      >
				      	<template slot-scope="scope">
			      	        <el-button @click="checkLogInfo(scope.row.id)" type="text">查看</el-button>
			      	        <el-button @click="deleteLog_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="logParam.pag"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="logParam.size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
				roleData:[],
				total_number:0,
				selected:[],
				logParam:{
					name:'',
					size:10,
					page:1,
					data_type:2,
					role_id: -1,
					file_type:2
				},
				keyword: '',
				role_id: -1,
				total_number:0,
				logList:[],
				rowLen: 0,
		    }
		},
		created(){
			this.getAllRole();
			this.getList();
		},
		methods: {
			searchFunc(){
				this.logParam.name = this.keyword;
				this.logParam.page = 1;
				this.getList();
			},
			reset() {
				this.keyword = '';
				this.logParam = {
	        name:'',
					size:10,
					page:1,
					data_type:2,
					role_id: -1,
					file_type:2
				}
				this.getList();
			},
			checkLogInfo(id){
				// 重写成功回调
				let success = ( data => {
					this.$alert(data.data.content, data.data.title, {
                        dangerouslyUseHTMLString: true,
                        showConfirmButton:false,
                    }).then(({ value }) => {}).catch(() => {});
				});

				this.$ajax.get('api/resource/resource_view',{params:{id:id},func:{success:success}})
  				
			},
			getAllRole(){
				// 重写成功回调
				let success = ( data => {
					this.roleData = data.data;
					console.log(this.roleData)
					this.roleData.unshift({id: -1,name:'全部角色'});
					// this.roleData = this.roleData.filter(item => item.id !== 1);
					this.$forceUpdate();//强制渲染
				});
	
  				this.$ajax.get('api/role/role',{params:{},func:{success:success}})
		    },
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false
            		this.logList = data.data.data;
								console.log(this.logList, 128)
            		this.total_number = data.data.data_sum;
            	})
            	let fail = (data => {
            		this.loading.status = false;
            		this.$message.error( data.msg )
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/Resource/journal',{params: this.logParam,func:{success:success,fail:fail}})
            },
            //选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
            deleteLog_confirm(obj){
				let yes = ( data => {
					this.rowLen = 1;
					this.deleteLog(obj.id,0);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

			},
	      	deleteMuiltLog_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				let yes = ( data => {
					this.deleteMuiltLog();
					this.rowLen = this.selected.length;
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

			},
	      	deleteMuiltLog(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.deleteLog(ids,0);
			},
			
		    deleteLog(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.logList.length - this.rowLen === 0) {
						if (this.logParam.pag > 1) {
							this.logParam.pag-- ;
						} else {
							this.logParam.pag = 1;
						}
					}

					this.getList();
				});
		    	this.$ajax.delete('api/resource/journal',{params:{id:id,status:status},func:{success:success}})
		    },
		     handleSizeChange(val) {
		     	this.logParam.page = 1;
		    	this.logParam.size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		    	this.logParam.page = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-journal-review {
		// .el-table__body-wrapper table tbody {
		// 	td:nth-child(6) {
		// 		padding: 0;
		// 	}
		// }
        .el-table td{
                padding: 4px 0;
        }
	}

    .el-message-box__wrapper {
        .el-message-box__message {
            ol li {
                text-align: left;
            }
        }
    }
</style>